@prefix-cls: ~'@{namespace}-header';

.@{prefix-cls} {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  // background-image: url('../../../assets/images/header-bgc.webp');
  // background-size: 100% 64px; /* 设置背景图的宽度和高度 */
  background-color: @menucolor;
  .ant-btn-text {
    color: #d8e5f8;
  }
  &-menu-type {
    &-picker {
      display: flex;
      justify-content: space-around;
      > div {
        position: relative;
        background-color: #f0f2f5;
        width: 72px;
        height: 60px;
        margin-right: 30px;
        padding: 24px;
        border-radius: 4px;
        box-shadow: 0 1px 2.5px #0000002e;
        &:hover {
          border: 2px solid #1890ff;
        }
        &:active {
          border: 2px solid #1890ff;
        }
      }
      > div:last-child {
        margin-right: 0;
      }
      &-left-top {
        &::after {
          content: '';
          position: absolute;
          top: 0;
          left: 0;
          background-color: #fff;
          height: 25%;
          width: 100%;
          box-sizing: border-box;
        }
        &::before {
          content: '';
          position: absolute;
          top: 0;
          left: 0;
          background-color: #273352;
          height: 100%;
          width: 30%;
          z-index: 1;
          box-sizing: border-box;
        }
      }

      &-top-left {
        &::after {
          content: '';
          position: absolute;
          top: 0;
          left: 0;
          background-color: #273352;
          height: 25%;
          width: 100%;
          box-sizing: border-box;
        }
        &::before {
          content: '';
          position: absolute;
          top: 0;
          left: 0;
          background-color: #fff;
          height: 100%;
          width: 30%;
          box-sizing: border-box;
        }
      }

      &-top {
        &::after {
          content: '';
          position: absolute;
          top: 0;
          left: 0;
          background-color: #273352;
          height: 25%;
          width: 100%;
          box-sizing: border-box;
        }
      }
    }
    &-title {
      text-align: center;
      font-weight: 500;
      font-size: 16px;
    }
  }
  &-left {
    position: absolute;
    left: 5px;
  }
  &-tabs {
    background-color: #fff;
    :deep(.ant-tabs-nav) {
      margin: 0;
      .ant-tabs-tab {
        position: relative;
        padding: 8px 12px;
        border-radius: 8px !important;
        &:hover {
          .ant-tabs-tab-remove {
            display: block;
          }
          background-color: #edf5ff;
        }
      }
      .ant-tabs-tab-active {
        background-color: #edf5ff;
      }
      .ant-tabs-tab-remove {
        display: none;
        margin-left: 0;
        padding: 0;
        position: absolute;
        top: 1px;
        right: 5px;
        .anticon-close {
          font-size: 10px;
          &:hover {
            color: #1890ff;
          }
        }
      }
    }
  }
  &-logo {
    width: 200px;
    height: 40px;
    float: left;
    color: gray;
    background-image: url('../../../assets/images/side-bgc.jpeg');
    transition: width 0.2s ease;
  }
}
